<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">我的赛事</block>
		</cu-custom>
		
		<scroll-view scroll-x class="bg-white nav text-center" :style="[{top:CustomBar + 'px'}]">
			<view class="cu-item csitem" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
			 :data-id="index">
				{{tabNav[index]}}
			</view>
		</scroll-view>
		<block v-if="TabCur==0">
			<view class="cu-card article"> 
				<navigator class="cu-item shadow" v-for="(item,index) in mycreate" :data-mid="item.id" :key="index" :url="'/pages/tennis/match/matchinfo?mid='+item.id">
					<view class="title">
						<view class="week">{{item.weekday}}</view>
						<view class="text-cut">{{ item.stardate}}</view>
					</view>
					<view class="content">
						<image :src="item.imgurl"
						 mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content">
								<view class="matchinfo">赛事名称：{{item.matchname}}</view>
								<view class="matchinfo">比赛项目：{{item.subjectlist}}</view>
								<view class="matchinfo">比赛开始时间：{{item.stardate}}</view>
							</view>
							<view>
								<view class="cu-tag bg-red light sm round">{{item.type==1?"个人赛":"团队赛"}}</view>
								<view class="cu-tag light sm round" :class="(item.state==1|| item.state==3)?'bg-blue':'bg-gray'">{{item.state==1?"报名中":item.state==2?"报名结束":item.state==3?"比赛中":item.state==4?"已结束":item.state==0?"改":"其他"}}</view>
							</view>
						</view>
					</view>
					<view v-show="item.state==0" class="tips"><label class="bg-red upreason" >改</label>{{item.updatereason}}</view>
				</navigator>
			</view>
		</block>
		<block v-if="TabCur==1">
			<view class="cu-card article">
				<navigator class="cu-item shadow" v-for="(item,index) in myjoin" :data-mid="item.id" :key="index" :url="'/pages/tennis/match/matchinfo?mid='+item.id">
					<view class="title">
						<view class="week">{{item.weekday}}</view>
						<view class="text-cut">{{ item.stardate}}</view>
					</view>
					<view class="content">
						<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
						 mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content">
								<view class="matchinfo">赛事名称：{{item.matchname}}</view>
								<view class="matchinfo">比赛项目：{{item.subjectlist}}</view>
								<view class="matchinfo">比赛开始时间：{{item.stardate}}</view>
							</view>
							<view>
								<view class="cu-tag bg-red light sm round">{{item.type==1?"个人赛":"团队赛"}}</view>
								<view class="cu-tag light sm round" :class="(item.state==1|| item.state==3)?'bg-blue':'bg-gray'">{{item.state==1?"报名中":item.state==2?"报名结束":item.state==3?"比赛中":item.state==4?"已结束":item.state==0?"改":"其他"}}</view>
							</view>
						</view>
					</view>
					<view v-show="item.state==0" class="tips"><label class="bg-red upreason" >改</label>{{item.updatereason}}</view>
				</navigator>
			
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		onLoad(option){
			this.userid=uni.getStorageSync("uid");
			this.openid=uni.getStorageSync('openid');
			console.log(this.openid);
			if(this.userid.length<=0 || this.openid.length<=0){
				uni.showModal({
				    title: '提示',
				    content: '您暂未登陆,是否马上登陆',
				    success: function (res) {
				        if (res.confirm) {
				          uni.switchTab({
				          	url:"/pages/tennis/user/index"
				          })
				        } else if (res.cancel) {
				           uni.navigateBack({
				           	
				           })
				        }
				    }
				});
				return;
			}
			uni.showLoading({
				title:'加载中...'
			})
			uni.request({
				url: 'https://www.52tennis.cn/Match/GetMatchList', //仅为示例，并非真实接口地址。
				data: {
					state:0,
					timelength:4,
					type:0,
					provinces:'',
					currpage:1,
					pagesize:20,
					openid:this.openid,
					ismycreate:1
				},
				success:(data)=> {
					
					console.log(data);
					if(data.data.result==1){
						
						this.mycreate=data.data.returnjson;
						
					}else{
						uni.showToast({
							title: '请求错误',
							icon: 'fail',
							mask: true,
							duration: 3000
						})
					}
				},
				fail:(res)=>{
					uni.showToast({
						title: '请求失败',
						icon: 'fail',
						mask: true,
						duration: 2000
					})
				},
				complete:()=>{
					
				}
			}),
			uni.request({
				url: 'https://www.52tennis.cn/Match/GetMatchList', //仅为示例，并非真实接口地址。
				data: {
					state:0,
					timelength:4,
					type:0,
					provinces:'',
					currpage:1,
					pagesize:20,
					openid:this.openid,
					ismycreate:2
				},
				success:(data)=> {
					
					console.log(data);
					if(data.data.result==1){
						this.myjoin=data.data.returnjson;
					}else{
						uni.showToast({
							title: '请求错误',
							icon: 'fail',
							mask: true,
							duration: 3000
						})
					}
				},
				complete: () => {
					uni.hideLoading();
				}
			})
			
		},
		data() {
			
			return {
				userid:"",
				openid:"",
				tabNav:['我创建的','我加入的'],
				TabCur: 0,
				CustomBar: this.CustomBar,
				modalName: null,
				cardCur: 0,
				mycreate:[],
				myjoin:[],
				
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}
		}
	}
</script>

<style>
	.icreate{
		float:right
	}
	.mycs-unum{
		font-size: 28rpx;
		margin-left: 15rpx;
	}
	.mycs-t{
		margin-left: 10rpx;
	}
	.icreate{
		font-size: 24rpx;
	}
</style>
